<template>
	<div class="tabs" :class="tabClass">
		<slot></slot>
	</div>
</template>

<script lang="ts">
  import Vue from 'vue';
  import {Component, Prop, Provide} from 'vue-property-decorator';

  @Component
  export default class Tab extends Vue {
    @Prop(String) selected: string | undefined;
    @Prop({
      validator(value: string) {
        return ['horizontal', 'vertical'].indexOf(value) >= 0;
      }
    }) direction: 'horizontal' | 'vertical' | undefined;

    eventBus = new Vue();

    @Provide('eventbus') eventbus: Vue = this.eventBus;

    mounted() {
      this.eventbus.$emit('update:selected', this.selected);
    }

    get tabClass() {
      if (this.direction === 'vertical') {
        return 'vertical-tab';
      }
      return '';

    }

  }
</script>

<style scoped lang="scss">
	.vertical-tab {
		display: flex;

		::v-deep > div.tabs-head {
			flex-direction: column;

			::v-deep & > div.tab-item {
				border: none;

				div.tab-item.active {
					border: none;
					border-right: 1px solid #00a0e9;
				}

			}
		}
	}
</style>